
<%= stylesheet_link_tag 'manage' %>

<div style="position: relative; width: 100%; height: 500px; border: 1px #ccc solid;">
    <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">
        <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
			<button dojoType="dijit.form.Button" onClick="add_gadget()">+ Add Remote Gadget</button>
			<button dojoType="dijit.form.Button" onClick="create_gadget()">+ Create New</button>
		</div>
        <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar" region="center" id="mainSplit">
            <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">
			
				<% @categories.each do |cat| %>
	                <div dojoType="dijit.layout.AccordionPane" title="<%= cat.name %>">
	                	<ul class="gadget_list">
	                		<% cat.gadgets.each do |gadget| %>
			                	<li class="gadget_listing">
			                		<a href="javascript:load_gadget_info('<%= gadget.id %>')">
				                		<div class="gadget_icon">
				                			<%= image_tag gadget.photo.url(:thumb) %>
										</div>
				                		<div class="gadget_name">
				                			<%= gadget.title %><br/>
										</div>
									</a>
								</li>
							<% end %>
	                	</ul>
	                </div>
				<% end %>
            </div>

            <div dojoType="dijit.layout.LayoutContainer" region="center">
                <div dojoType="dijit.layout.ContentPane" id="gadget_info_pane"></div>
            </div>
        </div>
    </div>
</div>


